<template>
  <div class="title">
    <div>
    </div>
    <div>
      <span>标题</span>
    </div>
    <div class="buttonParent">
      <button class="button1" v-on:click="login">登陆</button>
      <button class="button2" v-on:click="register">注册</button>
    </div>
  </div>
</template>
<script>

export default {
  
  name: 'TitleComponet',
  data() {
    return {
      userName: '',
      password: ''
    }
  },
  methods: {
    login() {
      this.$router.push({ path: '/login' })
    },

    register() {
        this.$router.push({ path: '/register' })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.title {
  display: flex;
  flex-direction: row;
  background: #00d8a0;
  width: 100%;
  box-shadow: 2px 2px 2px #a8a8a8;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  .buttonParent {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    .button1 {
      background: #00d8a0;
      color: #ffffff;
      border: 1px #00d8a0;
      border-style: solid;
    }
    .button2 {
      background: #00d8a0;
      color: #ffffff;
      border: 1px #00d8a0;
      border-style: solid;
    }
  }
}
</style>
